.permissionsPage {
  .statsRow {
    margin-bottom: 16px;
  }

  .filterCard {
    margin-bottom: 16px;
    
    .ant-card-body {
      padding: 16px;
    }
  }

  .permissionName {
    font-weight: 500;
    color: #262626;
    margin-bottom: 2px;
  }

  .permissionCode {
    font-size: 12px;
    color: #8c8c8c;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  .treeContainer {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 16px;
    background: #fafafa;
  }
   
   // 修复表格布局稳定性
   :global(.ant-table-wrapper) {
     overflow: hidden;
   }
   
   :global(.ant-table) {
     table-layout: auto;
   }
   
   :global(.ant-table-tbody > tr > td) {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .ant-tree {
      background: transparent;
      
      .ant-tree-node-content-wrapper {
        padding: 4px 8px;
        border-radius: 4px;
        
        &:hover {
          background: rgba(24, 144, 255, 0.1);
        }
      }

      .ant-tree-treenode {
        padding: 2px 0;
      }

      .ant-tree-switcher {
        color: #1890ff;
      }
    }
  }

  // 表格样式
  .ant-table {
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
    }

    .ant-table-tbody > tr {
      &:hover {
        background: #f5f5f5;
      }
    }

    // 操作按钮样式
    .ant-btn {
      &.ant-btn-text {
        &:hover {
          background: rgba(24, 144, 255, 0.1);
        }

        &.ant-btn-dangerous:hover {
          background: rgba(255, 77, 79, 0.1);
        }

        &:disabled {
          opacity: 0.3;
        }
      }
    }
  }

  // 统计卡片样式
  .ant-statistic {
    .ant-statistic-title {
      color: #8c8c8c;
      font-size: 14px;
    }

    .ant-statistic-content {
      color: #262626;
      font-weight: 600;
    }
  }

  // 标签样式
  .ant-tag {
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 8px;
    
    &.ant-tag-blue {
      background: #e6f7ff;
      border-color: #91d5ff;
      color: #1890ff;
    }

    &.ant-tag-green {
      background: #f6ffed;
      border-color: #b7eb8f;
      color: #52c41a;
    }

    &.ant-tag-orange {
      background: #fff7e6;
      border-color: #ffd591;
      color: #fa8c16;
    }

    &.ant-tag-red {
      background: #fff2f0;
      border-color: #ffccc7;
      color: #ff4d4f;
    }

    &.ant-tag-purple {
      background: #f9f0ff;
      border-color: #d3adf7;
      color: #722ed1;
    }

    &.ant-tag-gold {
      background: #fffbe6;
      border-color: #ffe58f;
      color: #faad14;
    }
  }

  // 徽章样式
  .ant-badge {
    .ant-badge-status-text {
      color: #595959;
      font-size: 13px;
    }

    .ant-badge-count {
      font-size: 12px;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
    }
  }

  // 模态框样式
  .ant-modal {
    .ant-modal-header {
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 24px;
      
      .ant-modal-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
        
        .anticon {
          margin-right: 8px;
          color: #1890ff;
        }
      }
    }

    .ant-modal-body {
      padding: 24px;
    }
  }

  // 表单样式
  .ant-form {
    .ant-form-item-label > label {
      font-weight: 500;
      color: #262626;
    }

    .ant-input,
    .ant-select-selector,
    .ant-input-number {
      border-radius: 6px;
      
      &:hover {
        border-color: #40a9ff;
      }

      &:focus,
      &.ant-input-focused,
      &.ant-select-focused .ant-select-selector {
        border-color: #40a9ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }

    .ant-select {
      .ant-select-arrow {
        color: #bfbfbf;
      }
    }

    .ant-switch {
      &.ant-switch-checked {
        background-color: #52c41a;
      }
    }
  }

  // 搜索框样式
  .ant-input-search {
    .ant-input-search-button {
      border-radius: 0 6px 6px 0;
      background: #1890ff;
      border-color: #1890ff;
      
      &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
      }
    }
  }

  // 按钮样式
  .ant-btn {
    border-radius: 6px;
    font-weight: 500;
    
    &.ant-btn-primary {
      background: #1890ff;
      border-color: #1890ff;
      
      &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
      }
    }

    &.ant-btn-default {
      &:hover {
        color: #40a9ff;
        border-color: #40a9ff;
      }
    }
  }

  // 分页样式
  .ant-pagination {
    .ant-pagination-item {
      border-radius: 6px;
      
      &.ant-pagination-item-active {
        background: #1890ff;
        border-color: #1890ff;
        
        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border-radius: 6px;
    }
  }

  // 权限分类图标颜色
  .anticon {
    &.anticon-safety {
      color: #1890ff;
    }

    &.anticon-file {
      color: #52c41a;
    }

    &.anticon-setting {
      color: #fa8c16;
    }

    &.anticon-api {
      color: #722ed1;
    }

    &.anticon-database {
      color: #eb2f96;
    }

    &.anticon-global {
      color: #13c2c2;
    }

    &.anticon-folder {
      color: #faad14;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .permissionsPage {
    .statsRow {
      .ant-col {
        margin-bottom: 16px;
      }
    }

    .filterCard {
      .ant-row {
        flex-direction: column;
        gap: 16px;
        
        .ant-col {
          width: 100%;
        }
      }

      .ant-space {
        width: 100%;
        justify-content: flex-start;
        
        .ant-space-item {
          width: 100%;
          
          .ant-input-search,
          .ant-select {
            width: 100% !important;
          }
        }
      }
    }

    .ant-table {
      .ant-table-container {
        overflow-x: auto;
      }
    }

    .ant-modal {
      margin: 0;
      max-width: 100vw;
      
      .ant-modal-content {
        border-radius: 0;
      }
    }

    .treeContainer {
      max-height: 400px;
    }
  }
}

// 暗色主题支持
[data-theme='dark'] {
  .permissionsPage {
    .permissionName {
      color: rgba(255, 255, 255, 0.85);
    }

    .permissionCode {
      color: rgba(255, 255, 255, 0.45);
    }

    .treeContainer {
      background: #1f1f1f;
      border-color: #434343;

      .ant-tree {
        .ant-tree-node-content-wrapper {
          &:hover {
            background: rgba(24, 144, 255, 0.2);
          }
        }
      }
    }

    .ant-table {
      .ant-table-thead > tr > th {
        background: #1f1f1f;
        color: rgba(255, 255, 255, 0.85);
      }

      .ant-table-tbody > tr {
        &:hover {
          background: #262626;
        }
      }
    }

    .ant-statistic {
      .ant-statistic-title {
        color: rgba(255, 255, 255, 0.45);
      }

      .ant-statistic-content {
        color: rgba(255, 255, 255, 0.85);
      }
    }

    .ant-badge {
      .ant-badge-status-text {
        color: rgba(255, 255, 255, 0.65);
      }
    }

    .ant-form {
      .ant-form-item-label > label {
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}